<template>
  <div :class="['content-item', source.userId === getUserInfo.id ? 'right' : '']">
    <n-avatar round :size="40"
              :src="isUrl(source.userInfo.avatar) ? source.userInfo.avatar : `${urlPrefix}${source.userInfo.avatar}`" />
    <div class="message">
      <div :class="['message-info', source.userId === getUserInfo.id ? 'right' : '']">
        <span class="user-name">{{ source.userInfo.username }}</span>
        <span class="user-ip">{{ source.ip }}</span>
        <span class="send-time">{{ computeTime(Date.parse(source.sendTime)) }}</span>
      </div>
      <div :class="[source.userId === getUserInfo.id ? 'message-right' : 'message-left']">
        {{ source.content }}
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { defineProps } from "vue";
import { useUserStore } from "@/store/modules/user";
import { computeTime } from "@/utils/dateUtil";
import { useGlobSetting } from "@/hooks/setting";
import { isUrl } from "@/utils/urlUtils";

defineProps({
  source: {
    type: Object,
    default: () => ({
      id: 0,
      userId: 0,
      roomId: 0,
      content: "",
      replyId: 0,
      gapCount: 0,
      createTime: Date.now(),
      userInfo: {
        username: "",
        avatar: ""
      }
    })
  }
})
// @ts-ignore
const { username, getUserInfo } = useUserStore()
const { urlPrefix } = useGlobSetting()
</script>

<style lang="less" scoped>
.right {
  flex-direction: row-reverse;
}

.content-item {
  min-height: 60px;
  display: flex;
  box-sizing: border-box;
  padding: 5px 10px;
}

.message {
  padding: 0 20px;
  flex: 1;

  .message-info {
    display: flex;
    padding-bottom: 5px;
    -webkit-column-gap: 4px;
    -moz-column-gap: 4px;
    column-gap: 4px;
    align-items: center;
    font-size: 12px;
    white-space: nowrap;
    user-select: none;

    .user-name {
    }

    .user-ip {
    }

    .send-time {
    }
  }

  .message-left, .message-right {
    position: relative;
    background-color: #FFFFFF;
    border-radius: 15px;
    padding: 10px;
    margin-bottom: 10px;
    white-space: pre-wrap;
    word-wrap: break-word;

    width: -moz-fit-content;
    width: fit-content;
  }

  .message-left {
    &:before {
      content: "";
      position: absolute;
      right: 100%;
      top: 10px;
      width: 0;
      height: 0;
      border-top: 10px solid transparent;
      border-right: 10px solid #FFFFFF;
      border-bottom: 10px solid transparent;
    }
  }

  .message-right {
    float: right;

    &:after {
      content: "";
      position: absolute;
      left: 100%;
      top: 10px;
      width: 0;
      height: 0;
      border-top: 10px solid transparent;
      border-left: 10px solid #FFFFFF;
      border-bottom: 10px solid transparent;
    }
  }
}
</style>
